<template>
	<view class="content">
		<view class="empty-cart" v-if="shoppingCartStore.products.length === 0">
			<uni-icons type="cart-filled" size="180" color="#cccccc"></uni-icons>
			<view class="tips-text">购物车暂无商品</view>
			<button type="warn" class="btn" @click="toSortPage">去挑选</button>
		</view>
		<view v-else>
			<view class="header">
				<label style="display: flex;align-items: center;">
					<radio color="#f73a3a" :checked="selectedAll" @click="handleSelectAll" />
					<text style="margin-left: 4px;">全选</text>
				</label>
				<button size="mini" type="warn" v-if="selectedProduct.length > 0"
					@click="handleDeleteProduct">删除</button>
			</view>
			<view class="product-list">
				<view class="product-item" v-for="(product,index) in shoppingCartStore.products" :key="product.id">
					<radio color="#f73a3a" :checked="selectedProduct.includes(product.id)"
						@click="handleSelectProduct(index,product)" />
					<image :src="getCover(product.flower.images)" class="cover"></image>
					<view class="info">
						<view class="name">{{ product.flower.name }}</view>
						<view class="price">{{ "￥" + numeral(product.flower.price).format("0.00") }}</view>
						<uni-number-box v-model="product.quantity" :min="1"
							@change="handleChangeProductQuantity(index,product)"></uni-number-box>
					</view>
				</view>
			</view>
			<view class="footer">
				<text>
					合计
				</text>
				<text class="total-price">
					{{ `￥${numeral(totalPrice).format("0.00")}` }}
				</text>
				<view class="settlement" @click="handleSettlement"
					:class="selectedProduct.length > 0 ? 'selected' : ''">
					{{ `去结算(${totalQuantity})` }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useShoppingCartStore
	} from "@/stores/shopping-cart.js"
	import {
		useUserStore
	} from "@/stores/user.js"
	import {
		onShow
	} from "@dcloudio/uni-app"
	import numeral from "numeral"
	import {
		computed,
		ref
	} from "vue"
	import {
		SERVER_URL
	} from "@/config/index.js"
	import {
		useOrderStore
	} from "@/stores/order.js"

	const userStore = useUserStore()
	const shoppingCartStore = useShoppingCartStore()

	const toSortPage = () => {
		uni.switchTab({
			url: "/pages/sort/sort"
		})
	}

	const totalPrice = computed(() => {
		const total = numeral(0)

		shoppingCartStore.products.
		filter((item) => selectedProduct.value.includes(item.id)).
		forEach((item) => {
			const price = numeral(item.quantity).multiply(item.flower.price).value()
			total.add(price)
		})

		return total.value() ?? 0
	})

	const totalQuantity = computed(() => {
		return shoppingCartStore.products.
		filter((item) => selectedProduct.value.includes(item.id)).
		reduce((count, item) => {
			count += item.quantity
			return count
		}, 0)
	})

	const getCover = (images) => {
		if (images && images.length > 0) {
			return SERVER_URL + images[0]
		}

		return "/static/images/flower.png"
	}

	const handleChangeProductQuantity = (index, product) => {
		console.log(shoppingCartStore.products[index])
		uni.request({
			url: SERVER_URL + '/customer/shopping-cart/quantity',
			method: "PUT",
			data: {
				id: shoppingCartStore.products[index].id,
				quantity: shoppingCartStore.products[index].quantity
			},
			header: {
				"content-type": "application/json",
				"authorization": userStore.token
			}
		});
	}

	const selectedAll = ref(false)
	const selectedProduct = ref([])
	const handleSelectProduct = (index, product) => {
		console.log(product)
		if (selectedProduct.value.includes(product.id)) {
			selectedProduct.value = selectedProduct.value.filter((item) => {
				return item !== product.id
			})
		} else {
			selectedProduct.value.push(product.id)
		}

		selectedAll.value = selectedProduct.value.length === shoppingCartStore.products.length

	}
	const handleSelectAll = () => {
		if (selectedAll.value) {
			selectedProduct.value = []
		} else {
			selectedProduct.value = shoppingCartStore.products.map((item) => item.id)
		}

		selectedAll.value = !selectedAll.value
	}

	const handleDeleteProduct = () => {
		shoppingCartStore.deleteProduct(selectedProduct.value).then(() => {
			selectedAll.value = false
			selectedProduct.value = []
		})
	}

	const orderStore = useOrderStore()
	const handleSettlement = () => {
		if (selectedProduct.value.length > 0) {
			orderStore.settlement({
				products: shoppingCartStore.products.filter((item) => selectedProduct.value.includes(item.id))
			})
		}
	}

	onShow(() => {
		if (userStore.id) {
			shoppingCartStore.loadShoppingCart()

		} else {
			uni.showModal({
				title: "请先登录账号",
				success: (res) => {
					if (res.confirm) {
						uni.switchTab({
							url: "/pages/user/user"
						})
					}
				}
			})
		}
	})
</script>

<style scoped lang="scss">
	.content {
		min-height: 100vh;
		background: #f4f3f3;

		.empty-cart {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 4rem;

			.tips-text {
				color: #cccccc;
			}

			.btn {
				margin-top: 4rem;
				padding: 0 24px;
			}
		}

		.header {
			position: fixed;
			top: 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 0 10px;
			min-height: 50px;

			button {
				margin: 0;
			}
		}

		.product-list {
			padding: 50px 0 100px 0;

			.product-item {
				padding: 10px;
				background-color: #fff;
				margin-top: 12px;
				display: flex;
				align-items: center;

				.cover {
					width: 80px;
					height: 80px;
					margin-left: 6px;
					margin-right: 10px;
				}

				.info {
					flex: 1;
					height: 80px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					overflow: hidden;

					.name {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.price {
						color: #ee0a24;
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			background-color: #fff;

			.total-price {
				color: #ee0a24;
				font-size: 1.25rem;
				padding-left: 4px;
				padding-right: 12px;
			}

			.settlement {
				padding: 16px 24px;
				background-color: #ee9296;
				color: #fff;
			}

			.settlement.selected {
				background-color: #ee0a24;
			}
		}
	}
</style>